<template>
  <view class="content-header">
    <view class="header-section">
      <view class="header-content">
        <view class="main-title">
          <!-- 已完成 -->
          <text
            v-if="order.is_send == 1"
            class="iconfont icon-success"
            style="color: #f0250e; font-size: 54rpx"
          ></text>
					<!-- <text
					  v-if="order.is_send == 0"
					  class="iconfont icon-success"
					  style="color: #f0250e; font-size: 54rpx"
					></text> -->
          <!-- 待核销 -->
          <text
            v-else
            class="iconfont icon-clock"
            style="color: #f0250e; font-size: 54rpx"
          ></text>
          <text>{{ statusTrans.str }}</text>
        </view>
        <view class="subtitle" v-if="statusTrans.str">{{
          statusTrans.statusStr
        }}</view>
      </view>
    </view>
    <view class="user-info">
      <i class="iconfont icon-seat"></i>
      <text class="add-right">{{ order.name }}</text>
      <text>{{ order.mobile }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    order: {
      type: Object,
      default: {},
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {
    statusTrans() {
      //   订单状态，-1:默认，0:待发货，1:已取消，2:已发货，3:已确认
      let str = "", //订单注释
        statusStr = ""; //订单状态title
      if (this.order.is_send == 0 && this.order.trade_status == 0) {
        str = "等待发货";
        statusStr = "等待商家处理";
      } else if (this.order.trade_status == 2) {
        str = "等待核销";
        statusStr = "等待商家处理";
      }else if (this.order.trade_status == -1) {
        str = "未支付";
        statusStr = "等待商家处理";
      }else if (this.order.trade_status == 1) {
        str = "已取消";
        statusStr = "等待商家处理";
      } else {
        str = "已完成";
        statusStr = "订单已核销";
      }
      return {
        str,
        statusStr,
      };
    },
  },
  methods: {
    handleBtn() {
      this.$emit("handleOrderTopBtn", {
        id: this.order.order_id,
        status: this.order.trade_status,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-header {
  width: 100%;
  .header-section {
    width: 100%;
    padding-bottom: 30rpx;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: PingFang SC;
    .header-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .main-title {
        margin-bottom: 26rpx;
        font-size: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        height: 56rpx;
        font-size: 40rpx;
        font-weight: 600;
        color: #f0250e;
        .iconfont {
          margin-right: 5rpx;
        }
      }

      .subtitle {
        text-align: center;

        line-height: 40rpx;
        font-size: 28rpx;
      }

      .order-price-box {
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-size: 28rpx;
        margin-bottom: 32rpx;
      }

      .operate-btn {
        width: 200rpx;
        height: 70rpx;
        background: #f0250e;
        border-radius: 36rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
  .user-info {
    width: 100%;
    height: 98rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    margin-bottom: 24rpx;
    .iconfont {
      color: #000000;
      margin-right: 6rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
    text:nth-child(1) {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #262626;
      margin-right: 22rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #262626;
    }
    .add-right {
      margin-right: 22rpx;
    }
  }
}
</style>
